<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="textBox">
                    <div>过去<span class="text1">3</span>个月的时间里</div>
                    <div><span class="text1">{{ this.oldManNum }}</span>位老人都是按时来营业厅缴费</div>
                    <div>本月突然<span class="text2">没有</span>来缴费</div>
                    <div>记得及时关怀哦</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { careAlertList } from "@/api/warning";

export default {
    name: "yearCareAlerts",  //年度关怀预警
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            currentIndex: 0,
            oldManNum: 0
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getList()
        }
    },
    mounted() {
        // this.getList()
    },
    methods: {
        //本月处理总次数
        async getList() {
            let query = {
                month: this.nowMonth
            }
            let res = await careAlertList(query);

            if (res.code == 200) {
                console.log('年度关怀预警', res.data);
                this.oldManNum = res.data.length
            }
        },
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner8.png);
    display: flex;
    // justify-content: center;
    position: relative;
}

.textBox {
    width: 60%;
    height: 60%;
    // border: 1px solid red;
    position: absolute;
    top: 330px;
    left: 110px;

    color: white;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: 32px;
    line-height: 110px;

    .text1 {
        display: inline-block;
        font-size: 90px;
        margin-bottom: 50px;
    }

    .text2 {
        color: red;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 20px;
    }
}
</style>